<!--
 * @Author: Liz.Zheng
 * @Date: 2021-12-20 10:32:00
 * @LastEditTime: 2023-02-16 10:12:44
 * @LastEditors: 郑亚莉 zhengyali@shequ.life
 * @Description: 添加备注
 * @Motto: Write the code. Change the world.
-->

<template>
  <a-drawer
    title="合同变更"
    :maskClosable="false"
    :visible="visible"
    :width="$store.getters.isMobile ? 350 : 450"
    :body-style="{ paddingBottom: '80px' }"
    @close="closeModal"
  >
    <a-alert
      message="提示"
      type="info"
      show-icon
    >
      <template #description>
        <div>
          1.合同变更需要退租原合同并创建新合同，审批通过后新合同将在租期起日开始执行。
        </div>
        <div>
          2.保证金费用类型账单将自动结转至新合同的保证金账单。
        </div>
      </template>
    </a-alert>
    <a-form layout="vertical" class="mt-20">
      <a-form-item
        label="变更生效时间"
        v-bind="validateInfos.changeContractTime"
      >
        <a-date-picker
          v-model:value="modelRef.changeContractTime"
          style="width: 60%"
          :disabled-date="disabledDate"
        />
      </a-form-item>
    </a-form>
    <div class="drawer-footer">
      <a-button class="mr-10" @click.prevent="closeModal">取消</a-button>
      <a-button type="primary" @click.prevent="onSubmit">确定</a-button>
    </div>
  </a-drawer>
</template>

<script>
import { defineComponent, reactive, watch } from "vue";
import { Form, message } from "ant-design-vue";
import moment from "moment";
import { useRouter } from "vue-router";
import store from "../../../../store";
const useForm = Form.useForm;

export default defineComponent({
  name: "",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    id: {
      type: [Number, String],
      default: 0,
    },
    disabledTime: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  setup(props, context) {
    const $router = useRouter();
    const state = reactive({
      originId: 0,
    });
    const modelRef = reactive({
      changeContractTime: "",
    });
    const rulesRef = reactive({
      changeContractTime: [{ required: true, message: "必填项" }],
    });
    const { resetFields, validate, validateInfos } = useForm(
      modelRef,
      rulesRef
    );
    const disabledDate = (current) => {
      if (props.disabledTime && props.disabledTime.length > 1) {
        return (
          current < moment(props.disabledTime[0]).startOf("days") ||
          current > moment(props.disabledTime[1]).endOf("days")
        );
      } else {
        return;
      }
    };
    const closeModal = () => {
      context.emit("cancel");
    };
    const onSubmit = () => {
      validate().then(() => {
        store.dispatch("SetContractDateRange", {
          startDate: moment(modelRef.changeContractTime).format("YYYY-MM-DD"),
        });
        if (window.__MICRO_APP_ENVIRONMENT__) {
          let microAppUrl = `/contract/addContract?id=${state.originId}&startDate=${moment(modelRef.changeContractTime).format(
            "YYYY-MM-DD"
          )}&contractEditType=change`
          window.microApp.forceDispatch({
            type: "SetMicroPages",
            microInfo: {
              microId: `org_add_contract_${state.originId}_${moment(modelRef.changeContractTime).format(
                "YYYY-MM-DD"
              )}_change`,
              app: 'org',
              name: `合同变更【${store.getters.contractDetail.owner_name}】`,
              url: microAppUrl,
            }
          })
        }
      });
    };

    watch(
      () => props.visible,
      (val) => {
        if (val) {
          const detail = store.getters.contractDetail;
          state.originId = detail.id;
        } else {
          resetFields();
        }
      }
    );

    return {
      modelRef,
      validateInfos,
      closeModal,
      onSubmit,
      disabledDate,
    };
  },
});
</script>
